<script setup lang="ts">
import type { GroupProcessDefinitionDto } from '@/api/process/type'
import { groupsDefinitions, queryTaskImage } from '@/api/process'
import { useRouter } from 'vue-router'

// 加载查询
onMounted(() => {
  handleQuery()
})

const defs = ref<GroupProcessDefinitionDto[]>()
// 查询
async function handleQuery() {
  const res = await groupsDefinitions()
  defs.value = res
}

// 获取首字符（处理可能为空的情况）
function getFirstChar(name?: string) {
  return name?.charAt(0).toUpperCase() || '?'
}

const colors = {
  primary: '#27ba9b',
  textWhite: '#ffffff',
}

const router = useRouter()
function openDesign() {
  router.push({
    name: 'Design',
  })
}

const imageData = ref('')
const showImageDialog = ref(false)
async function showImage(id: string) {
  const res = await queryTaskImage(id)
  imageData.value = res
  // 打开图片对话框
  showImageDialog.value = true
}
</script>

<template>
  <div class="container">
    <el-button type="primary" plain @click="openDesign()">
      创建流程
    </el-button>
    <!-- 使用语义化的标题标签 -->
    <section v-for="group in defs" :key="group.category" class="section">
      <h2 class="section-title">
        {{ group.category }}
      </h2>
      <el-divider class="custom-divider" />
      <div class="processes-container">
        <div v-for="process in group.dto" :key="process.id" class="avatar-group">
          <el-avatar shape="square" class="primary-avatar" @click="showImage(process.id)">
            {{ getFirstChar(process.name) }}
          </el-avatar>
          <span class="process-name">{{ process.key }}</span>
        </div>
      </div>
    </section>
    <el-dialog v-model="showImageDialog" title="流程图展示" width="80%">
      <div class="image-container">
        <img :src="`data:image/jpeg;base64,${imageData}`" alt="流程图">
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 容器布局优化 */
.container {
  padding: 20px;
  margin: 0 auto;
  height: 83vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  align-items: center;
}

.custom-divider {
  margin: 12px 0;
}

.processes-container{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
/* 头像组布局 */
.avatar-group {
  display: flex;
  gap: 16px; /* 现代浏览器支持的间距方案 */
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

/* 头像样式优化 */
.primary-avatar {
  background-color: v-bind('colors.primary') !important;
  color: v-bind('colors.textWhite');
  width: 40px;
  height: 40px;
  font-weight: 500;
  transition: transform 0.2s ease;
  align-items: center;
  cursor: pointer;

  /* 添加悬停效果提升交互性 */
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .section-title {
    font-size: 16px;
  }

  .primary-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .process-name {
    font-size: 0.5rem;
    align-items: center;
  }
}
</style>
